<template>
  <div class="produce-list">
    <van-nav-bar
      title="商品展示列表页"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
    />

    <!-- 商品列表 -->
    <div class="list">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        offset="0"
        ref="checked"
      >
        <div
          class="item"
          v-for="item in goodList"
          :key="item.id"
          @click="$router.push(`/home/produceDetail/${item.id}`)"
        >
          <img :src="item.img_url" alt="" />
          <div class="content">
            <div class="title">
              {{ item.title }}
            </div>
            <div class="info">
              <div class="price">
                <span>￥{{ item.sell_price }}</span>
                <span>￥{{ item.market_price }}</span>
              </div>
              <div class="hot">
                <span>热卖中</span>
                <span>剩余{{ item.stock_quantity }}件</span>
              </div>
            </div>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
import { getGoods } from "@/apis/produce.js";
export default {
  mounted() {
    this.$refs.checked.check();
  },
  data() {
    return {
      goodList: [],
      loading: false,
      finished: false,
      pageindex: 1,
    };
  },
  async created() {
    //   获取商品数据
    this.goodList = (await getGoods(1)).data.message;
    // console.log("this.goodList", this.goodList);
  },
  methods: {
    async onLoad() {
      this.pageindex += 1;

      const res = (await getGoods(this.pageindex)).data.message;
      //   console.log("res", res);

      if (res.length === 0) {
        this.finished = true;
        return;
      }

      res.forEach((item) => {
        this.goodList.push(item);
      });

      this.loading = false;

      //   console.log("this.goodList", this.goodList);
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.van-list__finished-text {
  width: 100%;
}
.van-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
/deep/.van-nav-bar__content {
  background-color: #f7f7f7;
}
/deep/.van-list__loading {
  width: 100%;
}
* {
  margin: 0;
  padding: 0;
}
.hot {
  display: flex;
  font-size: 13px;
  color: #a28c81;
  margin: 0 5px;
  padding: 7px 0;
  > span:nth-child(2) {
    margin-left: 50px;
  }
}
.price {
  display: flex;
  > span {
    margin: 0 5px;
    padding: 10px 0;
  }
  > span:nth-child(1) {
    color: red;
    margin-right: 10px;
  }
  > span:nth-child(2) {
    padding-top: 13px;
    color: #a28c81;
    font-size: 14px;
    text-decoration: line-through;
  }
}

img {
  width: 100%;
  height: 180px;
}
.item {
  width: 47%;
  height: 300px;
  background-color: white;
  padding: 3px;
  box-shadow: 0px 0px 1vw 0px black;
  margin-top: 10px;
}
.item:nth-child(1),
.item:nth-child(2) {
  margin-top: 0px;
}
.title {
  height: 45px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 14px;
}
.info {
  height: 70px;
  background-color: #f0f0f0;
}
.list {
  padding: 8px 5px 5px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 5px;
  border-top: 1px solid #e3e3e5;
}
</style>
